<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never" v-loading="loading">
        <!-- 搜索栏 -->
        <el-form
          :inline="true"
          :model="pagination"
          ref="pagination"
        >
          <el-form-item label="订单编号：" prop="code">
            <el-input v-model="pagination.code" placeholder='请输入订单编号'></el-input>
          </el-form-item>
          <el-form-item label="客户名称：" prop="contact">
            <el-input v-model="pagination.contact" placeholder="请输入客户名称"></el-input>
          </el-form-item>
          <el-form-item label="订单状态：" prop="orderStatus">
            <el-select v-model="pagination.orderStatus" placeholder="请选择订单状态">
              <el-option
                v-for="item in orderStatuses"
                :key="item.status"
                :label="item.name"
                :value="item.status">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单时间：" prop="orderTimeRange">
            <el-date-picker
              v-model="orderTimeRange"
              type="daterange"
              align="right"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="商家名称：" prop="storeName">
            <el-input v-model="pagination.storeName" placeholder="请输入商家名称"></el-input>
          </el-form-item>
          <el-form-item label="支付状态：" prop="payStatus">
            <el-select v-model="pagination.payStatus" placeholder="请选择支付状态">
              <el-option
                v-for="item in payStatuses"
                :key="item.status"
                :label="item.name"
                :value="item.status">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="handleRest">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 搜索栏 / -->
        <!-- 数据表格 -->
        <el-table
          :data="items"
          border
          style="width: 100%; margin-top:10px;"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column prop="code" label="订单编号"></el-table-column>
          <el-table-column prop="createTime" label="订单时间"></el-table-column>
          <el-table-column prop="storeName" label="商家名称"></el-table-column>
          <el-table-column prop="storeTel" label="商家电话"></el-table-column>
          <el-table-column prop="contact" label="客户名称"></el-table-column>
          <el-table-column prop="contactTel" label="客户电话"></el-table-column>
          <el-table-column label="支付状态">
            <template slot-scope="scope">
              <span>{{scope.row.payStatus == '1' ? '待支付':'已支付'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="orderStatus" label="订单状态">
            <template slot-scope="scope">
            <span>{{getOrderStatusName(scope.row.orderStatus)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="money" label="订单金额（¥）">
            <template slot-scope="scope">
            <span>{{getMoney(scope.row.money)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleView(scope.row)" type="text" size="small">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Number(total)"
        ></el-pagination>
        <!-- 数据表格 / -->
      </el-card>
      <!-- 新增标签弹层 -->
      <Dialog ref="addType" :dialogTitle="dialogTitle" v-on:newDataes = subMitForm></Dialog>
    </div>
  </div>
</template>

<script>
import { getList, getDetails, delData } from '@/api/order'
import Dialog from './../components/orderAdd'
export default {
  name: 'orderList',
  components: {
    Dialog
  },
  data() {
    return {
      items: [
        {
        }
      ],
      total: 20,
      pagination: {
        page: 1,
        pageSize: 10,
        type: 1,
        code: '',
        contact: '',
        orderStatus: '',
        storeName: '',
        payStatus: ''
      },
      orderTimeRange: [],
      loading: false,
      multipleSelection: [],
      dialogVisible: false,
      dialogTitle: '',
      orderStatuses: [{
        name: '全部',
        status: '-1'
      }, {
        name: '待接单',
        status: '1'
      }, {
        name: '待服务',
        status: '2'
      }, {
        name: '服务中',
        status: '3'
      }, {
        name: '服务完成',
        status: '4'
      }],
      payStatuses: [{
        name: '全部',
        status: '-1'
      }, {
        name: '待支付',
        status: '1'
      }, {
        name: '已支付',
        status: '2'
      }]
    }
  },
  created() {
    this.doQuery(this.pagination)
  },
  methods: {
    // 业务方法
    async doQuery(parent) {
      this.loading = true
      if (this.orderTimeRange.length > 0) {
        this.pagination.createTimeStart = this.orderTimeRange[0]
        this.pagination.createTimeEnd = this.orderTimeRange[1]
      } else {
        this.pagination.createTimeStart = ''
        this.pagination.createTimeEnd = ''
      }
      await getList(parent)
        .then(res => {
          const { data } = res
          this.items = data.items
          this.total = data.counts
          this.loading = false
        })
        .catch(err => {
          console.log(err)
          this.loading = false
        })
    },
    // UI方法 - 重置
    handleRest() {
      this.orderTimeRange = []
      this.$refs['pagination'].resetFields()
    },
    // 搜索
    handleSearch() {
      this.doQuery(this.pagination)
    },
    //
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    // 每页条数
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.pagination.pageSize = val
      this.doQuery(this.pagination)
    },
    // 当前页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.pagination.page = val
      this.doQuery(this.pagination)
    },
    // 添加
    handleAdd(val) {
      this.dialogTitle = '添加'
      this.$refs.addType.dialogFormV()
    },
    // 详情获取  - 如果有详情接口 读详情
    async getDetails(id) {
      let dataes = {}
      await getDetails(id)
        .then(res => {
          const { data } = res
          this.loading = false
          dataes = data
        })
        .catch(err => {
          console.log(err)
          this.loading = false
        })
      return dataes
    },
    // 编辑
    async handleView (val) {
      // 如果有详情接口 读详情
      // const data = await this.getDetails(val.id)
      // 如果列表中的数据可以满足修改的信息展示  则不用读取上面的详情接口 用下面的data
      // const data = val
      this.$router.push({path: 'orderDetail/' + val.id})
    },
    // 删除
    handleDelect(item) {
      this.$confirm('是否确认删除？')
        .then(async ret => {
          await delData(item.id)
            .then(res => {
              console.log(res)
              this.loading = false
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.doQuery(this.pagination)
            })
            .catch(err => {
              console.log(err)
              this.loading = false
            })
        })
        .catch(ret => {
          console.log(ret)
        })
    },
    // subMitForm
    subMitForm(val) {
      if (val.id) {
        this.$message.success('修改成功')
      } else {
        this.$message.success('添加成功')
      }
      this.doQuery(this.pagination)
    },
    getOrderStatusName(status) {
      let statusName = '待接单'
      switch (status) {
        case '1':
          statusName = '待接单'
          break
        case '2':
          statusName = '待服务'
          break
        case '3':
          statusName = '服务中'
          break
        case '4':
          statusName = '服务完成'
          break
      }
      return statusName
    },
    getMoney(value) {
      let realVal = ''
      if (!isNaN(value) && value !== '') {
        value = value / 100
      // 截取当前数据到小数点后两位
      realVal = parseFloat(value).toFixed(2)
      } else {
        realVal = '--'
      }
      return realVal
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px 0px 0px;
}
.pagination {
  margin-top: 10px;
  text-align: right;
}
</style>
